<template>
  <div class="cyber-menu-display" :style="{ '--theme-color': config.themeColor }">
    <!-- Animated Background -->
    <div class="cyber-grid"></div>
    
    <!-- Header -->
    <header class="menu-header">
      <div class="glitch-container">
        <h1 class="glitch" :data-text="config.barName">{{ config.barName }}</h1>
      </div>
    </header>

    <!-- Beer Grid -->
    <div class="beer-grid">
      <div v-for="(beer, index) in config.beers" 
           :key="index" 
           class="beer-card"
           :style="getCardStyle(index)"
      >
        <!-- Holographic Effect -->
        <div class="holo-effect"></div>
        
        <!-- Content -->
        <div class="beer-content">
          <h2 class="beer-name">{{ beer.name }}</h2>
          <div class="beer-style">{{ beer.style }}</div>
          
          <!-- Stats -->
          <div class="beer-stats">
            <div class="stat">
              <span class="stat-label">ABV</span>
              <span class="stat-value">{{ beer.abv }}%</span>
            </div>
            <div class="stat">
              <span class="stat-label">IBU</span>
              <span class="stat-value">{{ beer.ibu }}</span>
            </div>
          </div>
          
          <p class="beer-description">{{ beer.description }}</p>
          
          <!-- Price with Glitch Effect -->
          <div class="price-tag">
            <span class="currency">¥</span>
            <span class="amount">{{ beer.price }}</span>
          </div>
        </div>

        <!-- Decorative Elements -->
        <div class="card-decoration"></div>
        <div class="corner-decoration"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const config = ref({
  barName: 'Cyberpunk Bar',
  themeColor: '#00ff9f',
  beers: []
})

// Load configuration from URL parameters
onMounted(() => {
  const configParam = route.query.config
  if (configParam) {
    try {
      config.value = JSON.parse(decodeURIComponent(configParam))
    } catch (e) {
      console.error('Failed to parse configuration:', e)
    }
  }
})

// Adjust color based on index for variety
const adjustColor = (color, index) => {
  const hex = color.replace('#', '')
  const r = parseInt(hex.substr(0, 2), 16)
  const g = parseInt(hex.substr(2, 2), 16)
  const b = parseInt(hex.substr(4, 2), 16)
  
  const adjustment = index * 20
  return `rgb(${Math.max(0, r - adjustment)}, ${Math.max(0, g - adjustment)}, ${Math.max(0, b - adjustment)})`
}

// Get card style object
const getCardStyle = (index) => {
  return {
    'animation-delay': `${index * 0.1}s`,
    '--card-color': adjustColor(config.value.themeColor, index)
  }
}
</script>

<style scoped>
.cyber-menu-display {
  min-height: 100vh;
  background: #0a0a0a;
  color: white;
  position: relative;
  overflow: hidden;
  padding: 20px;
  font-family: 'Orbitron', sans-serif;
}

/* Animated Grid Background */
.cyber-grid {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    linear-gradient(transparent 97%, var(--theme-color) 97%),
    linear-gradient(90deg, transparent 97%, var(--theme-color) 97%);
  background-size: 40px 40px;
  opacity: 0.1;
  animation: gridMove 20s linear infinite;
  pointer-events: none;
}

@keyframes gridMove {
  from { transform: translateY(0); }
  to { transform: translateY(40px); }
}

/* Header Styles */
.menu-header {
  text-align: center;
  padding: 40px 0;
  position: relative;
}

.glitch-container {
  position: relative;
  display: inline-block;
}

.glitch {
  font-size: 3.5em;
  font-weight: bold;
  color: var(--theme-color);
  text-shadow: 0 0 10px var(--theme-color);
  position: relative;
  animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
  from { text-shadow: 0 0 10px var(--theme-color); }
  to { text-shadow: 0 0 20px var(--theme-color), 0 0 30px var(--theme-color); }
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
  animation: glitch-anim 3s infinite linear alternate-reverse;
}

.glitch::before {
  left: 2px;
  text-shadow: -2px 0 #ff00ff;
  animation-delay: -1s;
}

.glitch::after {
  left: -2px;
  text-shadow: 2px 0 #00ffff;
  animation-delay: -2s;
}

@keyframes glitch-anim {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
  100% { transform: translate(0); }
}

/* Beer Grid Layout */
.beer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  padding: 20px;
  position: relative;
  z-index: 1;
}

/* Beer Card Styles */
.beer-card {
  background: linear-gradient(135deg, var(--card-color) 0%, #000 100%);
  border-radius: 12px;
  padding: 25px;
  position: relative;
  overflow: hidden;
  animation: cardFadeIn 0.5s ease-out forwards;
  opacity: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

@keyframes cardFadeIn {
  from { 
    opacity: 0;
    transform: translateY(20px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

.beer-content {
  position: relative;
  z-index: 2;
}

.beer-name {
  font-size: 1.8em;
  color: var(--theme-color);
  margin-bottom: 10px;
  text-shadow: 0 0 10px var(--theme-color);
}

.beer-style {
  color: #888;
  font-size: 1em;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.beer-stats {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.stat {
  background: rgba(0, 0, 0, 0.5);
  padding: 8px 15px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-label {
  font-size: 0.8em;
  color: #888;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 1.1em;
  color: var(--theme-color);
}

.beer-description {
  color: #ccc;
  line-height: 1.6;
  margin-bottom: 20px;
  font-size: 0.95em;
}

.price-tag {
  font-size: 1.5em;
  color: var(--theme-color);
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 5px;
}

.currency {
  font-size: 0.8em;
  opacity: 0.8;
}

/* Holographic Effect */
.holo-effect {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    transparent 0%,
    rgba(255, 255, 255, 0.05) 50%,
    transparent 100%
  );
  animation: holoShift 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes holoShift {
  0% { transform: translateX(-100%); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}

/* Decorative Elements */
.card-decoration {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  border-left: 2px solid var(--theme-color);
  border-bottom: 2px solid var(--theme-color);
  opacity: 0.5;
}

.corner-decoration {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 30px;
  border-right: 2px solid var(--theme-color);
  border-top: 2px solid var(--theme-color);
  opacity: 0.5;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .glitch {
    font-size: 2.5em;
  }
  
  .beer-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 10px;
  }
  
  .beer-card {
    padding: 20px;
  }
}
</style> 